<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>078-HTML5-WebWorkers</title>
</head>

<body>
    <!-- web worker 是运行在后台的 JavaScript，不会影响页面的性能。 -->
    <!-- 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 -->
    <!-- web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 -->

    <p>计数： <output id="result"></output></p>
    <button onclick="startWorker()">开始工作</button>
    <button onclick="stopWorker()">停止工作</button>

    <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>

    <script>
        var w;

        function startWorker() {
            // 检测浏览器是否支持 Web Worker
            if (typeof (Worker) !== "undefined") {
                // 是的! Web worker 支持!
                if (typeof (w) == "undefined") {
                    w = new Worker("demo_workers.js");
                }
                // 然后我们就可以从 web worker 发送和接收消息了。
                // 向 web worker 添加一个 "onmessage" 事件监听器：
                w.onmessage = function (event) {
                    document.getElementById("result").innerHTML = event.data;
                };
            } else {
                // 抱歉! Web Worker 不支持
                document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
            }
        }

        function stopWorker() {
            // 终止 Web Worker
            w.terminate();
            w = undefined;
        }
    </script>
</body>

</html>